<template>
	<uni-popup ref="popup" type="bottom" :maskClick="true" @maskClick="cancel">
		<view class="bd">
			<view class="title">
				<text class="txt">选择账号登录</text>
			</view>
			<scroll-view class="accounts" scroll-y="true">
				<view :class="['accounts-item',{'accounts-item-selected':index==value}]" v-for="(item,index) in accounts" :key="index" @click="select(item,index)">
					<text class="txt">{{item.userid}}</text>
					<icon class="iconfont icon-yes" v-if="index==value"></icon>
				</view>
			</scroll-view>
			<view class="btns">
				<button type="default" class="btn btn-confirm" open-type="getPhoneNumber" @click="close" @getphonenumber="getPhoneNumber" v-if="showPhoneNumber">确定登录</button>
				<button type="default" class="btn btn-confirm" @click="confirm" v-else>确定登录</button>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	export default {
		props: {
			defaultIndex: {
				type: [Number],
				default: 0
			},
			userAccounts: [Object, Array]
		},
		computed: {
			accounts() {
				if (Array.isArray(this.userAccounts)) return this.userAccounts;
				let newArray = [],
					obj = this.userAccounts;
				Object.getOwnPropertyNames(obj).forEach(function(key) {
					newArray.push(obj[key])
				});
				return newArray;
			},
			// 是否显示手机授权登录按钮
			showPhoneNumber() {
				const flag = this.accounts[this.value].checkmobile == 0;
				return flag;
			}
		},
		data() {
			return {
				code: null,
				value: this.defaultIndex,
				cancelLogin: false //是否取消也执行登录
			}
		},
		created() {
			this.init();
		},
		methods: {
			async init() {
				const res = await uni.login({ provider: 'weixin' });
				this.code = res.code;
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			// 选择账号
			select(item, index) {
				this.value = index;
			},
			// 确认登录
			confirm() {
				this.close();
				this.$emit('confirm', { mid: this.accounts[this.value].mid });
			},
			// 关闭登录
			cancel() {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					if (this.cancelLogin) this.$emit('cancel', { mid: this.accounts[this.value].mid });
					else this.$emit('notLogin');
				}, 200)
			},
			// 手机号登录
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					this.$emit('confirmGetPhoneNumber', { parameter: { iv: e.detail.iv, ciphertext: e.detail.encryptedData, code: this.code }, mid: this.accounts[this.value].mid })
				} else {
					this.$emit('cancel', { mid: this.accounts[this.value].mid });
				}
				this.close();
			}
		}
	}
</script>
<style scoped lang="scss">
	.bd {
		background-color: #fff;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;
		font-size: 32rpx;
		color: #000;
	}

	.accounts {
		max-height: 50vh;
		padding: 0 34rpx;

		&-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 108rpx;
			border-bottom: 1rpx solid #ddd;
			font-size: 32rpx;
			color: #333;

			&-selected {
				color: #E1835B;
			}
		}
	}

	.btns {
		padding: 30rpx 0 48rpx;

		.btn {
			width: 682rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			background: #E1835B;
			font-size: 36rpx;
			color: #fff;
		}
	}

	@font-face {
		font-family: 'iconfont';
		src: url(data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTZE9VpkAAAY8AAAAHEdERUYAKQAKAAAGHAAAAB5PUy8yPKpJRAAAAVgAAABgY21hcAAP6iAAAAHIAAABQmdhc3D//wADAAAGFAAAAAhnbHlmQrEEWgAAAxgAAABIaGVhZB64c40AAADcAAAANmhoZWEHUwOFAAABFAAAACRobXR4DAAAjAAAAbgAAAAQbG9jYQAkAAAAAAMMAAAACm1heHABDwAdAAABOAAAACBuYW1lXoIBAgAAA2AAAAKCcG9zdHZ8A2cAAAXkAAAALgABAAAAAQAAfo9bpF8PPPUACwQAAAAAAN3Ml8gAAAAA3cyXyACMADkDdQLHAAAACAACAAAAAAAAAAEAAAOA/4AAXAQAAAAAAAN1AAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAEABEAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAABAQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZADA5nXmdQOA/4AAAAPcAIAAAAABAAAAAAAAAAAAAAAgAAEEAAAAAAAAAAQAAAAEAACMAAAAAwAAAAMAAAAcAAEAAAAAADwAAwABAAAAHAAEACAAAAAEAAQAAQAA5nX//wAA5nX//xmOAAEAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJAAAAAEAjAA5A3UCxwAQAAABPgEeAQcBDgEvAS4BPgEfAQMfCyYfBgv+YwwoD+wPAxgmD8YCsg8GFiYP/dIQBQ3ADCYdAwyhAAAAAAAAEgDeAAEAAAAAAAAAEwAoAAEAAAAAAAEACABOAAEAAAAAAAIABwBnAAEAAAAAAAMACACBAAEAAAAAAAQACACcAAEAAAAAAAUACwC9AAEAAAAAAAYACADbAAEAAAAAAAoAKwE8AAEAAAAAAAsAEwGQAAMAAQQJAAAAJgAAAAMAAQQJAAEAEAA8AAMAAQQJAAIADgBXAAMAAQQJAAMAEABvAAMAAQQJAAQAEACKAAMAAQQJAAUAFgClAAMAAQQJAAYAEADJAAMAAQQJAAoAVgDkAAMAAQQJAAsAJgFoAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQAAENyZWF0ZWQgYnkgaWNvbmZvbnQAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGkAYwBvAG4AZgBvAG4AdAAAaWNvbmZvbnQAAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AAEdlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC4AAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAGh0dHA6Ly9mb250ZWxsby5jb20AAAAAAgAAAAAAAAAKAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAEAAAAAQACAQIDZHVpAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwADAAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAAN3Ml8gAAAAA3cyXyA==) format('truetype');
	}

	.icon-yes:before {
		content: "\e675";
	}
</style>
